<%@ page contentType="text/html;charset=UTF-8"%>
<!doctype html>
<html>
<head>
<title>用户首页</title>
<jsp:include flush="true" page="../include.jsp"></jsp:include>

<script type="text/javascript">
$(function(){
	//实例化树形菜单
	//$('#w').dialog('open');
	/*
	$.post('${home}/menu.do', function(data) {
        $('#tree').tree({
            //url: '/admin/getsysdeprt',
            data: data
        });
    }, 'json');*/
    

    
    //$('.datagrid-mask').mask('数据加载中......');
	
	$("#tree").tree({
	  //data: data,
	  //url:'${home}/menu.do',
	  url:'tree_data1.json',
	  onClick:function(node){
	    if(node.attributes.url){
	      Open(node.text,node.attributes.url,node.iconCls);
	    }
	  },
	  onLoadSuccess:function(node){
		 //$('.datagrid-mask').unmask();
	  }
	});
		
	
	$('#tabsMenu').menu({
		onClick : function(item) {
			var curTabTitle = $(this).data('tabTitle');
			var type = $(item.target).attr('type');

			if (type === 'refresh') {
				layout_center_refreshTab(curTabTitle);
				return;
			}
			
			if (type === 'close') {
				var t = $('#tabs').tabs('getTab', curTabTitle);
				if (t.panel('options').closable) {
					$('#tabs').tabs('close', curTabTitle);
				}
				return;
			}

			var allTabs = $('#tabs').tabs('tabs');
			var closeTabsTitle = [];

			$.each(allTabs, function() {
				var opt = $(this).panel('options');
				if (opt.closable && opt.title != curTabTitle && type === 'closeOther') {
					closeTabsTitle.push(opt.title);
				} else if (opt.closable && type === 'closeAll') {
					closeTabsTitle.push(opt.title);
				}
			});

			for ( var i = 0; i < closeTabsTitle.length; i++) {
				$('#tabs').tabs('close', closeTabsTitle[i]);
			}
		}
	});

	$('#tabs').tabs({
		fit : true,
		border : false,
		onContextMenu : function(e, title) {
			e.preventDefault();
			$('#tabsMenu').menu('show', {
				left : e.pageX,
				top : e.pageY
			}).data('tabTitle', title);
		},
		tools : [ {
			text:"刷新",
			iconCls : 'icon-reload',
			handler : function() {
				var href = $('#tabs').tabs('getSelected').panel('options').href;
				if (href) {/*说明tab是以href方式引入的目标页面*/
					var index = $('#tabs').tabs('getTabIndex', $('#tabs').tabs('getSelected'));
					$('#tabs').tabs('getTab', index).panel('refresh');
				} else {/*说明tab是以content方式引入的目标页面*/
					var panel = $('#tabs').tabs('getSelected').panel('panel');
					var frame = panel.find('iframe');
					try {
						if (frame.length > 0) {
							for ( var i = 0; i < frame.length; i++) {
								frame[i].contentWindow.document.write('');
								frame[i].contentWindow.close();
								frame[i].src = frame[i].src;
							}
							if ($.browser.msie) {
								CollectGarbage();
							}
						}
					} catch (e) {
					}
				}
			}
		}, {
			text:"关闭所有",
			iconCls : 'icon-cancel',
			handler : function() {
				var index = $('#tabs').tabs('getTabIndex', $('#tabs').tabs('getSelected'));
				var tab = $('#tabs').tabs('getTab', index);
				if (tab.panel('options').closable) {
					$('#tabs').tabs('close', index);
				} else {
					$.messager.alert('提示', '[' + tab.panel('options').title + ']不可以被关闭', 'error');
				}
			}
		} ]
	});
			
	/*
	//绑定tabs的右键菜单
	  $("#tabs").tabs({
	    onContextMenu:function(e,title){
	      e.preventDefault();
	      $('#tabsMenu').menu('show', {  
	        left: e.pageX,  
	        top: e.pageY  
	      }).data("tabTitle",title);
	    }
	  });
	  
	  //实例化menu的onClick事件
	  $("#tabsMenu").menu({
	    onClick:function(item){
	      CloseTab(this,item.name);
	    }
	  });
	  
	  //几个关闭事件的实现
	  function CloseTab(menu,type){
	    var curTabTitle = $(menu).data("tabTitle");
	    var tabs = $("#tabs");
	  
	    if(type === "close"){
	       tabs.tabs("close",curTabTitle);
	      return;
	    }
	    
		if (type === 'refresh') {
			curTabTitle.panel('refresh');
			//tabs.tabs("refresh",curTabTitle);
			return;
		}
	    
	    var allTabs = tabs.tabs("tabs");
	    var closeTabsTitle = [];
	    
	    $.each(allTabs,function(){
	      var opt = $(this).panel("options");
	      if(opt.closable && opt.title != curTabTitle && type === "Other"){
	        closeTabsTitle.push(opt.title);
	      }else if(opt.closable && type === "All"){
	        closeTabsTitle.push(opt.title);
	      }
	    });
	    
	    for(var i = 0;i<closeTabsTitle.length;i++){
	      tabs.tabs("close",closeTabsTitle[i]);
	    }
	  };
	*/	  
		
})

		//在右边center区域打开菜单，新增tab
	function Open(text,url,iconCls){
	  if(!iconCls)iconCls = 'icon-word';
	  if($("#tabs").tabs('exists',text)){
	      $('#tabs').tabs('select', text);
	  }else{
	    $('#tabs').tabs('add', {
	      //tools:'#p-tools',
	      title:text,
	      closable:true,
	      iconCls:iconCls,
	      //content:url,
	      content : '<iframe src="' + url + '" frameborder="0" style="border:0;width:100%;height:99.2%"></iframe>'
	      //href:url
	    });
	  }
	}

	function layout_center_refreshTab(title) {
		$('#tabs').tabs('getTab', title).panel('refresh');
	}

	function layout_center_addTabFun(opts) {
		var t = $('#tabs');
		if (t.tabs('exists', opts.title)) {
			t.tabs('select', opts.title);
		} else {
			t.tabs('add', opts);
		}
	}
	
	function changePwd(){
		$('#dlg').dialog('open');
	}
	
	function logout(){
		$.messager.confirm('注销','您确定要退出系统吗？',function(r){   
			if (r){   
				alert('ok');   
			}
		}); 
	}
	
</script>

<script type="text/javascript">
		function collapseAll(){
			$('#tt').tree('collapseAll');
		}
		function expandAll(){
			$('#tt').tree('expandAll');
		}
		function expandTo(){
			var node = $('#tt').tree('find',113);
			$('#tt').tree('expandTo', node.target).tree('select', node.target);
		}
		function getSelected(){
			var node = $('#tt').tree('getSelected');
			if (node){
				var s = node.text;
				if (node.attributes){
					s += ","+node.attributes.url;
				}
				alert(s);
			}
		}
		  function removeAll(){
			  alert(1);
			  var tabs = $("#tabs");
			  var allTabs = tabs.tabs("tabs");
			  var closeTabsTitle = [];
			  $.each(allTabs,function(){
				 var opt = $(this).panel("options");
				 closeTabsTitle.push(opt.title);
			  });
			  for(var i = 0;i<closeTabsTitle.length;i++){
				  tabs.tabs("close",closeTabsTitle[i]);
			  }
		  };
	</script>
<style type="text/css">
.header{width:100%;height:53px;background:url(../images/header_bei.gif);background-color:#DAE7F6;}
.header01{float:left;height:53px;width:53px;margin-left:15px;background:url(../images/desktop.png) no-repeat;}
.header02{float:left;height:28px;width:auto;margin-left:10px;padding-top:25px;font-size:20px;font-family:"黑体";}
.header03{float:right;height:53px;margin-right:15px;}
#footer{
	height:26px;
	background-color:#FFFFFF;
	line-height:20px;
	text-align:center;
	margin: 0 auto;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #99BBE8;
	border-left-color: #99BBE8;
	background-image: url(../images/foot.gif);
	background-repeat: repeat-x;
}
</style>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',border:false" >
		<div class="header">
			<div class="header01"></div>
			<div class="header02">信息管理系统</div>
			<div class="header03">
				<table cellspacing=0 cellpadding=0 width="100%">
					<tbody>
						<tr>
							<td align=right width="300px">
								<div style="padding-right: 50px; padding-top: 20px">
									<a href="javascript:changePwd();" class="easyui-linkbutton" data-options="iconCls:'icon-home',plain:true">修改密码</a> <a href="javascript:logout();" class="easyui-linkbutton" data-options="iconCls:'icon-logout',plain:true" >退出系统</a>
								<div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div data-options="region:'west',split:true,title:'用户菜单'" style="width: 300px; padding: 10px;background-color:#DAE7F6;">


		<ul id="tree" class="easyui-tree" data-options="animate:true,dnd:true">数据初始化...
		</ul>

	</div>

	<!--  
	<div data-options="region:'east',split:true,collapsed:true,title:'East'" style="width:100px;padding:10px;">east region</div>
	-->
	<div id="footer" data-options="region:'south',border:false">
		版权所有 copyright 2013
	</div>



	<div data-options="region:'center',title:'工作区'">
		<div class="easyui-tabs" fit="true" border="false" id="tabs" data-options="tools:'#tab-tools'">
			<div title="首页">
				<div style="margin: 10px;float: left;width: 40%">
					<div class="easyui-panel" title="New Topic" style="width: 400px;">
						<div style="padding: 10px 0 10px 60px">
							<form id="ff" method="post">
								<table>
									<tr>
										<td>Name:</td>
										<td><input class="easyui-validatebox" type="text" name="name" data-options="required:true"></input></td>
									</tr>
									<tr>
										<td>Email:</td>
										<td><input class="easyui-validatebox" type="text" name="email"
											data-options="required:true,validType:'email'"></input></td>
									</tr>
									<tr>
										<td>Subject:</td>
										<td><input type="text" name="subject" data-options="required:true"></input></td>
									</tr>
									<tr>
										<td>Message:</td>
										<td><textarea name="message" style="height: 60px;"></textarea></td>
									</tr>
									<tr>
										<td>Language:</td>
										<td></td>
									</tr>
								</table>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>

	<div id="p-tools">
		<!--  
		<a href="javascript:void(0)" class="icon-mini-add" onclick="alert('add')"></a>
		<a href="javascript:void(0)" class="icon-mini-edit" onclick="alert('edit')"></a>-->
		<a href="javascript:void(0)" class="icon-mini-refresh" onclick="alert('refresh')"></a>
	</div>

	<div id="tab-tools">
		<a href="javascript:void(0)" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'"
			onclick="removeAll()" title="关闭所有"></a>
	</div>

	<div id="tabsMenu" class="easyui-menu" style="width: 120px;">
		<div type="refresh">刷新</div>
		<div class="menu-sep"></div>
		<div type="close">关闭</div>
		<div type="closeOther">关闭其他</div>
		<div type="closeAll">关闭所有</div>
	</div>


	<div id="w" class="easyui-window" closed="true" modal="true" title="My Window" iconCls="icon-save"
		style="width: 400px; height: 200px; padding: 5px; background: #fafafa;" border="false">ssssssssssssssss</div>
		
	<div id="dlg" class="easyui-dialog" title="修改密码" closed="true" style="width:450px;height:300px;padding:10px"
			data-options="modal:true,
				iconCls: 'icon-save',
				toolbar: [{
					text:'Add',
					iconCls:'icon-add',
					handler:function(){
						alert('add')
					}
				},'-',{
					text:'Save',
					iconCls:'icon-save',
					handler:function(){
						alert('save')
					}
				}],
				buttons: [{
					text:'Ok',
					iconCls:'icon-ok',
					handler:function(){
						alert('ok');
					}
				},{
					text:'Cancel',
					handler:function(){
						alert('cancel');;
					}
				}]
			">
		新密码:<input type="text" />
	</div>	
		
</body>

</html>